<template>
  <div>
    <el-row>
      <el-col>
        <el-tree
          :data="data"
          :expand-on-click-node="false"
          v-bind="$attrs"
          node-key="id"
          default-expand-all>
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span><el-radio :label="data.id" v-model="selectId"><i /></el-radio>{{ node.label }}</span>
          </span>
        </el-tree>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TreeWithRadio',
  props: {
    data: {
      type: Array,
      required: true
    },
    initId: {
      type: String,
      required: true
    },
    t: {
      type: Number,
      required: true
    }
  },
  data() {
    return { selectId: this.initId }
  },
  watch: {
    t() {
      this.selectId = this.initId
    }
  },
  methods: {
    confirm() {
      this.$emit('complete', this.selectId)
    },
    cancel() {
      this.$emit('complete', '')
    }
  }
}
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-row {
    margin-bottom: 20px;
  }
</style>
